import { t } from 'i18next'
import { FC, useRef, useState } from 'react'
import { SelectedIcon, StyledMenuWrap, StyledPopup } from './style'
import { Trigger, TriggerInstance } from '@kedacom/react-next'
import shallow from 'zustand/shallow'
import Alert from '@/components/Alert'
import { useMeetingTVWallStore } from '../store'
import { boxPositionsEntity, TvWallMemberItemEntity } from '../interface'
import { defaultData, useAutoVmpStore } from '../AutoVmpDialog/store'
import { useMeetingParamsStore } from '../../meetingParams/store'

type BoxMenuProps = {
	/**盒子位置在离线状态*/
	boxInfo: boxPositionsEntity
	/**设置人员和跟随信息*/
	member: Partial<TvWallMemberItemEntity> | null
	/**数组源位置 */
	index: number
	/**是否显示设置 */
	is_show_setting: boolean
	handleSetActive: (flag: boolean) => void
}
export const BoxSetting: FC<BoxMenuProps> = ({ boxInfo, is_show_setting, member, handleSetActive }) => {
	const { update, correct_style, operate_correct_style_info, isNeedUpdate } = useMeetingTVWallStore(
		(state) => ({
			update: state.update,
			correct_style: state.correct_style,
			show_mt_name: state.show_mt_name,
			boxDetailVOsSource: state.boxDetailVOsSource,
			operate_correct_style_info: state.operate_correct_style_info,
			isNeedUpdate: state.isNeedUpdate,
		}),
		shallow
	)
	const [isShowChannel] = useState<boolean>(false) /**是否显示通道选择 */
	const triggerRef = useRef<TriggerInstance>(null) /**下拉选择框 */
	const { member_type = 0 } = member ?? {}
	// console.log('BoxItem组件', member)
	const BoxMenu = () => {
		const { meetingType } = useMeetingParamsStore.getState()
		if (meetingType !== 2) {
			return (
				<>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('管理方跟随'), 3)}>
						{member_type === 3 && <SelectedIcon></SelectedIcon>}
						<span>{t('管理方跟随')}</span>
					</div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('发言方跟随'), 2)}>
						{member_type === 2 && <SelectedIcon></SelectedIcon>}
						<span>{t('发言方跟随')}</span>
					</div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('会议轮询跟随'), 4)}>
						{member_type === 4 && <SelectedIcon></SelectedIcon>}
						<span>{t('会议轮询跟随')}</span>
					</div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('内容共享跟随'), 10)}>
						{member_type === 10 && <SelectedIcon></SelectedIcon>}
						<span>{t('内容共享跟随')}</span>
					</div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('选看画面合成'), 6)}>
						{member_type === 6 && <SelectedIcon></SelectedIcon>}
						<span>{t('选看画面合成')}</span>
					</div>
					<div className="item-line"></div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('单通道轮询'), 5)}>
						{member_type === 5 && <SelectedIcon></SelectedIcon>}
						<span>{t('单通道轮询')}</span>
					</div>
					{meetingType === 1 && (
						<div className="rc_box-menu" onClick={() => onTypeSelect(t('自主多画面'), 8)}>
							{member_type === 8 && <SelectedIcon></SelectedIcon>}
							<span>{t('自主多画面')}</span>
						</div>
					)}
					{meetingType !== 1 && (
						<div className="rc_box-menu" onClick={() => onTypeSelect(t('开启四分屏'), 9)}>
							{member_type === 9 && <SelectedIcon></SelectedIcon>}
							<span>{t('开启四分屏')}</span>
						</div>
					)}
					{isShowChannel && (
						<>
							<div className="item-line"></div>
							<div className="rc_box-menu" onClick={() => onTypeSelect(t('通道选择'), 4)}>
								{t('通道选择')}
							</div>
						</>
					)}
				</>
			)
		}
		if (meetingType === 2) {
			return (
				<>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('管理方跟随'), 3)}>
						{member_type === 3 && <SelectedIcon></SelectedIcon>}
						<span>{t('管理方跟随')}</span>
					</div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('发言方跟随'), 2)}>
						{member_type === 2 && <SelectedIcon></SelectedIcon>}
						<span>{t('发言方跟随')}</span>
					</div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('会议轮询跟随'), 4)}>
						{member_type === 4 && <SelectedIcon></SelectedIcon>}
						<span>{t('会议轮询跟随')}</span>
					</div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('内容共享跟随'), 10)}>
						{member_type === 10 && <SelectedIcon></SelectedIcon>}
						<span>{t('内容共享跟随')}</span>
					</div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('选看画面合成'), 6)}>
						{member_type === 6 && <SelectedIcon></SelectedIcon>}
						<span>{t('选看画面合成')}</span>
					</div>
					<div className="item-line"></div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('单通道轮询'), 5)}>
						{member_type === 5 && <SelectedIcon></SelectedIcon>}
						<span>{t('单通道轮询')}</span>
					</div>
					<div className="rc_box-menu" onClick={() => onTypeSelect(t('开启四分屏'), 9)}>
						{member_type === 9 && <SelectedIcon></SelectedIcon>}
						<span>{t('开启四分屏')}</span>
					</div>
				</>
			)
		}
	}
	const onMouseLeave = () => {
		triggerRef.current?.close()
		handleSetActive(false)
	}
	const onMouseEnter = () => {
		triggerRef.current?.open()
		handleSetActive(true)
	}
	const onTypeSelect = (_name: string, operateType: number) => {
		handleSetActive(false)
		const { meetingType } = useMeetingParamsStore.getState()
		/**关闭下拉选择 */
		triggerRef.current?.close()
		/**清空通道 */
		if (meetingType === 2) {
			if (operateType === 4 || operateType === 6) {
				Alert(t('超元RTC会议暂不支持此功能'))
				return
			}
		}
		if (operateType === 0) {
			handleClearHduId()
			return false
		}
		if (
			operateType === 2 ||
			operateType === 3 ||
			operateType === 4 ||
			operateType === 6 ||
			operateType === 10 ||
			operateType === 11
		) {
			handleSetMemberType(operateType)
			return false
		}
		if (operateType === 5 /**单通道轮询 */) {
			update({ isSinglePollOpen: true, correct_style_operate_box_info: boxInfo.hdu_id })
		}
		if (operateType === 8 /**自主多动画*/) {
			// let _init_data: Vmp = {
			// 	id: '',
			// 	name: '',
			// 	mode: 2,
			// 	show_mt_name: 1,
			// 	layout: 0,
			// 	members: [],
			// 	state: 0,
			// 	voice_hint: 0,
			// 	broadcast: 0,
			// 	except_self: 0,
			// }
			// if (boxInfo.vmp) {
			// 	// _init_data = new Vmp(boxInfo.vmp)
			// }
			// window.TS.mcc.tvwall.wallBox.reactInitVmp(_init_data)
			update({
				correct_style_operate_box_info: boxInfo.hdu_id,
			})
			useAutoVmpStore.setState({
				isOpen: true,
				mode: 'setting',
				data: defaultData,
				onClose: () => {
					update({ isNeedUpdate: !isNeedUpdate })
				},
				onConfirm: (_data) => {},
			})

			// update({ operateBoxInfo: boxInfo, operateBoxInfoIndex: index })
		}
		if (operateType === 9) {
			update({
				isFourScreenOpen: true,
				correct_style_operate_box_info: boxInfo.hdu_id,
			})
		}
	}
	/**清空通道 */
	const handleClearHduId = async () => {
		let source = {}
		/**找到当前通道对应的盒子*/
		let member = operate_correct_style_info[correct_style]?.members || []
		/**判断当前通道是否已有缓存*/
		let flag = member?.some((item) => {
			return item.hdu_id === boxInfo.hdu_id
		})
		if (flag) {
			/**已存在缓存*/
			for (let i = 0; i < member.length; i++) {
				if (member[i].hdu_id === boxInfo.hdu_id) {
					member[i] = {
						member_type: 0,
						hdu_alias: boxInfo.hdu_alias,
						hdu_id: boxInfo.hdu_id,
					}
				}
			}
		} else {
			/**不能找到新增*/
			member?.push({
				member_type: 0,
				hdu_alias: boxInfo.hdu_alias,
				hdu_id: boxInfo.hdu_id,
			})
		}
		source = Object.assign({}, operate_correct_style_info[correct_style], { members: member })
		operate_correct_style_info[correct_style] = source
		update({
			operate_correct_style_info: operate_correct_style_info,
			isNeedUpdate: !isNeedUpdate,
			correct_style_operate_box_info: boxInfo.hdu_id,
		})
	}
	/**设置跟随类型（管理方、发言方、会议轮询、内容共享、选看画面） */
	const handleSetMemberType = async (type: number) => {
		let source = {}
		/**找到当前通道对应的盒子*/
		let member = operate_correct_style_info[correct_style]?.members || []
		/**判断当前通道是否已有缓存*/
		let flag = member?.some((item) => {
			return item.hdu_id === boxInfo.hdu_id
		})
		if (flag) {
			/**已存在缓存*/
			for (let i = 0; i < member.length; i++) {
				if (member[i].hdu_id === boxInfo.hdu_id) {
					member[i] = {
						member_type: type,
						hdu_alias: boxInfo.hdu_alias,
						hdu_id: boxInfo.hdu_id,
					}
				}
			}
		} else {
			/**不能找到新增*/
			member?.push({
				member_type: type,
				hdu_alias: boxInfo.hdu_alias,
				hdu_id: boxInfo.hdu_id,
			})
		}
		source = Object.assign({}, operate_correct_style_info[correct_style], { members: member })
		operate_correct_style_info[correct_style] = source
		update({
			isNeedUpdate: !isNeedUpdate,
			operate_correct_style_info: operate_correct_style_info,
			correct_style_operate_box_info: boxInfo.hdu_id,
		})
	}
	return (
		<>
			<StyledMenuWrap>
				<div className="operate" onMouseLeave={onMouseLeave}>
					<Trigger
						ref={triggerRef}
						popup={<StyledPopup>{BoxMenu()}</StyledPopup>}
						popupPlacement="bottomStart"
					>
						<span className="set" title={t('设置通道')} onClick={onMouseEnter}></span>
					</Trigger>
					{!!member?.member_type && member?.member_type !== 0 && (
						<span
							className="delete"
							onClick={() => onTypeSelect(t('清空通道'), 0)}
							title={t('清空通道')}
						></span>
					)}
				</div>
			</StyledMenuWrap>
		</>
	)
}
